<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->

<template>
  <div class="app-container calendar-list-container" v-loading="loading">
    <el-form style="width: 650px;" label-width="160px" :rules="rules" :model="form" ref="form">
      <div class="title">基本信息</div>
      <el-form-item label="企业名称:" prop="companyName">
        <el-input v-model="form.companyName" placeholder="请输入企业名称" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="企业类型:" prop="companyType">
        <el-select v-model="form.companyType" placeholder="请选择">
          <el-option
            v-for="item in productDevice"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业注册地址:" prop="registerAddress">
        <el-input v-model="form.registerAddress" placeholder="请输入企业注册地址" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="企业联系地址:" prop="contactAddress">
        <el-input v-model="form.contactAddress" placeholder="请输入企业联系地址" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="主营业务:" prop="mainBusiness">
      <el-input v-model="form.mainBusiness" type="textarea" resize="none" rows="5" placeholder="主营业务" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="邮政编码:" prop="postalCode">
        <el-input type="tel" v-model="form.postalCode" placeholder="请输入邮政编码" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="注册号/社会信用代码:" prop="creditCode">
        <el-input v-model="form.creditCode" placeholder="请输入注册号/社会信用代码" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="营业执照:" prop="hasBusinessLicense">
        <el-radio-group v-model="form.hasBusinessLicense">
          <el-radio label="1">有执照</el-radio>
          <el-radio label="0">无执照</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="经办类型:" prop="handleType">
        <el-radio-group v-model="form.handleType">
          <el-radio label="1">法人</el-radio>
          <el-radio label="2">经办人</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="法定代表人:" prop="person">
        <el-input v-model="form.person" placeholder="请输入法定代表人" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="经办负责人姓名:" prop="handlePerson">
        <el-input v-model="form.handlePerson" placeholder="请输入经办负责人姓名" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="经办人联系电话:" prop="handlePhone">
        <el-input v-model="form.handlePhone" placeholder="请输入经办人联系电话" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="经办人身份证号码:" prop="handleIdentityNumber">
        <el-input v-model="form.handleIdentityNumber" placeholder="请输入经办人身份证号码" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="经办人身份证照片:" prop="idCardImgList">
        <el-upload  action="/app/sys/oss/upload" :file-list="form.idCardImgList" :limit="2" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-success="handleDetailImgSuccess" :on-remove="handleDetailImgRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <div class="title" v-if="form.hasBusinessLicense === '1'">企业资质</div>
      <el-form-item label="营业执照:" prop="businessLicenseList" v-if="form.hasBusinessLicense === '1'">
        <el-upload  action="/app/sys/oss/upload" :file-list="form.businessLicenseList" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-success="handleProductImgSuccess" :on-remove="handleProductImgRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit('form')">提交</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="previewVisible">
      <img width="100%" :src="previewImageUrl">
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters, mapState } from 'vuex'
  import { brandCompleteInformation, queryDictList } from '@/api/goods'
  import { getBrandInfo } from '@/api/user'
  export default {
    name: 'seller_index',
    data() {
      const validateProduct = (rule, value, callback) => {
        if (value.length <= 0 && this.form.hasBusinessLicense === '1') {
          callback(new Error('请上传营业执照附件'))
        } else {
          callback()
        }
      }
      const validateDetail = (rule, value, callback) => {
        if (value.length <= 0) {
          callback(new Error('请上传身份证照片（正面和反面）'))
        } else {
          callback()
        }
      }
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          }
        },
        goodsId: '', // 商品id
        userId: '', // userId
        id: '', // 认证信息id
        brandStatus: '', // 是否品牌商
        loading: false, // 加载中
        previewVisible: false, // 图片预览显示
        previewImageUrl: '', // 图片预览
        form: {
          companyName: '', // 企业名称
          companyType: '', // 企业类型
          registerAddress: '', // 企业注册地址
          contactAddress: '', // 企业联系地址
          mainBusiness: '', // 主营业务
          postalCode: '', // 邮政编码
          creditCode: '', // 注册号
          hasBusinessLicense: '1', // 是否有营业执照
          handleType: '1', // 经办类型
          person: '', // 法人名称
          handlePerson: '', // 经办人姓名
          handlePhone: '', // 经办人联系电话
          handleIdentityNumber: '', // 经办人身份证号
          businessLicenseList: [], // 营业执照
          idCardImgList: [] // 身份证图片列表
        }, // 表单内容
        priceList: [
          {
            number: '',
            price: ''
          }
        ], // 价格列表
        productDevice: [], // 产品分组
        suitPeople: [], // 适用人群
        rules: {
          companyName: [
            {
              required: true,
              message: '请输入企业名称',
              trigger: 'blur'
            }
          ],
          companyType: [
            {
              required: true,
              message: '请选择企业类型',
              trigger: 'blur'
            }
          ],
          registerAddress: [
            {
              required: true,
              message: '请输入企业注册地址',
              trigger: 'blur'
            }
          ],
          contactAddress: [
            {
              required: true,
              message: '请输入企业联系地址',
              trigger: 'blur'
            }
          ],
          mainBusiness: [
            {
              required: true,
              message: '请输入主营业务',
              trigger: 'blur'
            }
          ],
          postalCode: [
            {
              required: true,
              message: '请输入邮政编码',
              trigger: 'blur'
            }
          ],
          creditCode: [
            {
              required: true,
              message: '请输入注册号/社会信用代码',
              trigger: 'blur'
            }
          ],
          person: [
            {
              required: true,
              message: '请输入法人名称',
              trigger: 'blur'
            }
          ],
          handlePerson: [
            {
              required: true,
              message: '请输入经办人名称',
              trigger: 'blur'
            }
          ],
          handlePhone: [
            {
              required: true,
              message: '请输入经办人联系电话',
              trigger: 'blur'
            }
          ],
          handleIdentityNumber: [
            {
              required: true,
              message: '请输入经办人身份证号',
              trigger: 'blur'
            }
          ],
          businessLicenseList: [
            {
              required: true,
              validator: validateProduct,
              trigger: 'blur'
            }
          ],
          idCardImgList: [
            {
              required: true,
              validator: validateDetail,
              trigger: 'blur'
            }
          ]
        }
      }
    },
    computed: {
      ...mapGetters(['permissions']),
      ...mapState({
        userInfo: state => state.user.userInfo
      })
    },
    created() {
      const that = this
      that.userId = that.userInfo.userId
      that.getModuleList() // 获取公司类型列表
      getBrandInfo(that.userId).then(res => {
        if (res.data.data.authInfo) {
          const info = res.data.data.authInfo
          that.form.companyName = info.companyName
          that.form.companyType = info.companyType
          that.form.registerAddress = info.registerAddress
          that.form.contactAddress = info.contactAddress
          that.form.mainBusiness = info.mainBusiness
          that.form.hasBusinessLicense = info.hasBusinessLicense
          that.form.businessLicense = info.businessLicense
          that.form.creditCode = info.creditCode
          that.form.postalCode = info.postalCode
          that.form.person = info.person
          that.form.handlePerson = info.handlePerson
          that.form.handleType = info.handleType
          that.form.handlePhone = info.handlePhone
          that.form.handleIdentityNumber = info.handleIdentityNumber
          const faceImage = {
            url: info.handleIdentityFaceImage
          }
          const backImage = {
            url: info.handleIdentityBackImage
          }
          if (info.hasBusinessLicense === '1') {
            const list = info.businessLicense.split(',')
            list.forEach(item => {
              const license = {
                url: item
              }
              that.form.businessLicenseList.push(license)
            })
          }
          that.form.idCardImgList.push(faceImage)
          that.form.idCardImgList.push(backImage)
          that.id = info.id
        }
      })
    },
    methods: {
      getModuleList() {
        this.loading = true
        queryDictList('company_type').then(res => {
          const list = res.data.data
          list.forEach(item => {
            const obj = {
              value: item.value,
              label: item.description
            }
            this.productDevice.push(obj)
          })
          this.loading = false
        })
      }, // 获取公司类型列表
      handlePictureCardPreview(file) { // 预览图片
        this.previewImageUrl = file.url
        this.previewVisible = true
      },
      handleProductImgSuccess(response, file, fileList) {
        this.form.businessLicenseList = fileList
      }, // 产品图上传成功
      handleDetailImgSuccess(response, file, fileList) {
        this.form.idCardImgList = fileList
      }, // 详情图上传成功
      handleProductImgRemove(file, fileList) {
        this.form.businessLicenseList = fileList
      }, // 删除图片
      handleDetailImgRemove(file, fileList) {
        this.form.idCardImgList = fileList
      }, // 删除图片
      // handleAddPrice() { // 添加价格
      //   if (this.priceList.length >= 4) {
      //     return
      //   }
      //   const obj = {
      //     number: '',
      //     price: ''
      //   }
      //   this.priceList.push(obj)
      // },
      handleSubmit() { // 提交发布
        const that = this
        that.$refs['form'].validate((valid) => {
          if (valid) {
            const params = that.form
            let url = '/app/sysUserAuthInfo/add'
            if (that.form.idCardImgList.length !== 2) {
              that.$message.error('请上传身份证照片（正面和反面）')
              return
            }
            params.handleIdentityFaceImage = that.form.idCardImgList[0].response ? that.form.idCardImgList[0].response.data : that.form.idCardImgList[0].url
            params.handleIdentityBackImage = that.form.idCardImgList[1].response ? that.form.idCardImgList[1].response.data : that.form.idCardImgList[1].url
            delete params.idCardImgList
            params.businessLicense = []
            that.form.businessLicenseList.forEach(item => {
              const str = item.response ? item.response.data : item.url
              params.businessLicense += str + ','
            })
            params.businessLicense = params.businessLicense.substring(0, params.businessLicense.length - 1)
            delete params.businessLicenseList
            params.userId = that.userId
            if (that.id) {
              params.id = that.id
              url = '/app/sysUserAuthInfo/update'
            }
            brandCompleteInformation(url, params).then((res) => {
              if (res.data.code === '0') {
                that.$message({
                  message: '提交成功',
                  type: 'success'
                })
                setTimeout(() => {
                  that.$router.go(0)
                }, 500)
              }
            })
          } else {
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style scoped>
  .title{
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 15px;
  }
  .select-group {
    width: 200px!important;
  }
  .el-loading-spinner .el-loading-text {
    text-align: center;
  }
  .coor-title {
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
  }
  .coor-input {
    float: left;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    font-size: 14px;
    width: 200px;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
  .coorPrice-item {
    margin-bottom: 22px;
  }
  .coor-price {
    float: left;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    font-size: 14px;
    width: 100px;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
</style>
